<template>
	<view class="main-page">
		<view class="header-box">
			<view class="row-container width-100p">
				<image class="avatar" src="../../static/common/ic_avatar_female.png" v-if="customerData.sex == 0"></image>
				<image class="avatar" src="../../static/common/ic_avatar_male.png" v-if="customerData.sex == 1"></image>
				<view class="column-container height-126" style="justify-content: space-between;" >
					<text class="font-333-32 font-weight-600">{{customerData.realName}}</text>
					<view class="row-container mt-4">
						<text class="font-999-26">{{customerData.id}}</text>
						<view class="column-line"></view>
						<text class="font-999-26" v-if="customerData.sex == 1">男</text>
						<text class="font-999-26" v-if="customerData.sex == 0">女</text>
						<view class="column-line"></view>
						<text class="font-999-26">联系电话：{{customerData.mobile}}</text>
					</view>
					<text class="font-999-26 mt-4">注册时间：{{customerData.createTime}}</text>
				</view>
			</view>
			<view class="add-btn-box" @click="showAddWindow = true">
				<image class="wh-36 mr-10" src="../../static/common/ic_add.png"></image>
				<text class="font-fff-32 font-weight-600">添加服务项目</text>
			</view>
		</view>
		
		<view class="service-list-box">
			<view class="row-container-row-between service-count-box">
				<view class="row-container" style="position: relative;">
					<text class="font-333-36 font-weight-600" style="z-index: 50;">服务项目</text>
					<view class="title-line"></view>
				</view>
				<text class="font-666-28">共{{dataList.length}}条</text>
			</view>
			
			<view class="column-container width-100p" v-if="dataList.length > 0">
				<view class="data-item" @click="gotoServiceDetail(item)"
				v-for="(item , index) in dataList" :key="index">
					<view class="row-container-row-between width-100p">
						<view class="row-container width-70p">
							<text class="font-333-32 font-weight-600 font-ellipsis ">
							{{item.categoryName}} - {{item.name}}</text>
							<text class="green-tag" v-if="item.type == 1">体验</text>
							<text class="orange-tag" v-if="item.type == 2">赠送</text>
							<text class="red-tag" v-if="item.type == 3">活动</text>
						</view>
						<view class="row-container">
							<text class="finish" v-if="item.leftCount == 0">已结束</text>
							<text class="time-up" v-if="item.leftCount != 0 && item.checkExpire == 1">已到期</text>
							<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
						</view>
					</view>
					<view class="row-container-row-between width-100p mt-14">
						<text class="font-333-28 font-weight-600 width-33p">金额：{{item.price}}</text>
						<text class="font-333-28 font-weight-600 width-33p" 
						style="text-align: center;">总次数：{{item.totalCount}}</text>
						<text class="width-33p font-333-28 font-weight-600"
						style="text-align: right;">剩余次数：{{item.leftCount}}</text>
					</view>
					<view class="time-box">
						<text class="font-333-24">开卡时间：{{item.startTime}}</text>
						<text class="font-333-24">有效期至：{{item.expireTime}}</text>
					</view>
				</view>
			</view>
			<NoData v-else hint="暂无服务项目" class="width-100p"></NoData>
		</view>
		
		<view class="window-main" style="justify-content: flex-end;" v-if="showAddWindow">
			<view class="add-window">
				<text class="font-333-36 font-weight-600">添加服务项目</text>
				<view class="row-container width-100p mt-40">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">大类</text>
				</view>
				<picker mode="selector" :range="allServiceList" range-key="itemName"
				class="width-100p" @change="changeService">
					<view class="row-container-row-between input-box">
						<text class="font-333-28" v-if="parentName">{{parentName}}</text>
						<text class="font-999-28" v-else>请选择大类</text>
						<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
				<view class="row-container width-100p mt-20">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">项目</text>
				</view>
				<picker mode="selector" :range="childList" range-key="itemName"
				class="width-100p" @change="changeChildService">
					<view class="row-container-row-between input-box">
						<text class="font-333-28" v-if="addParams.name">{{addParams.name}}</text>
						<text class="font-999-28" v-else>请选择服务项目</text>
						<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">总次数</text>
						</view>
						<input
							v-model="addParams.totalCount"
							class="input-box mr-10"
							placeholder="请输入数量"
							type="number"
							placeholder-class="font-999-28"
							@input="changeTotalCount"
						/>
					</view>
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">金额</text>
						</view>
						<input
							v-model="addParams.price"
							class="input-box"
							placeholder="请输入金额"
							placeholder-class="font-999-28"
						/>
					</view>
				</view>
				
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">开卡时间</text>
						</view>
						<picker mode="date" v-model="addParams.startTime" class="width-100p"
						 @change="changeOpenTime">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="addParams.startTime">{{addParams.startTime}}</text>
								<text class="font-999-28" v-else>请选择日期</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">有效至</text>
						</view>
						<picker mode="date" v-model="addParams.expireTime" class="width-100p" 
						@change="changeDate">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="addParams.expireTime">{{addParams.expireTime}}</text>
								<text class="font-999-28" v-else>请选择日期</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
				</view>
				
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">开卡人</text>
						</view>
						<picker mode="selector" :range="allEmployeeList" range-key="userName"
						class="width-100p" @change="changeEmployee" :disabled="checkBoss != 0">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="staffName">{{staffName}}</text>
								<text class="font-999-28" v-else>请选择开卡人</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">标签</text>
						</view>
						<picker mode="selector" :range="chargeList" range-key="label"
						class="width-100p" @change="changeChargeType">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="chargeTypeLabel">{{chargeTypeLabel}}</text>
								<text class="font-999-28" v-else>请选择标签</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="add-cancel" @click="handleCloseAddWindow">取消</text>
					<text v-if="addParams.name && addParams.price && addParams.totalCount 
					&& addParams.expireTime && addParams.startTime && addParams.staffId"
					 class="add-confirm" style="background: #F94C4B;"
						@click="handleAddService">确认添加</text>
					<text v-else class="add-confirm">确认添加</text>
				</view>
			</view>
		</view>
		
		<view class="window-main" style="justify-content: flex-end;" v-if="showAddServiceWindow">
			<view class="add-service-window">
				<text class="font-333-36 font-weight-600">添加服务项目</text>
				<text class="font-666-32 mt-40" style="text-align: center;">尊敬的用户，请先为店铺设置服务项目</text>
			
				<view class="row-container width-100p mt-40">
					<text class="add-cancel" @click="showAddServiceWindow = false">取消</text>
					<text class="add-confirm" style="background: #F94C4B;" @click="gotoAddService">立即去设置</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	
	export default {
		data() {
			return {
				checkBoss:-1, // 0为店长
				
				customId:'',
				customerData:{
					id:'',
					realName:'',
					mobile:'',
					createTime:''
				},
				dataList:[],
				
				showAddWindow:false,
				addParams:{
					type:'', // 收费类型  0收费  1体验  2赠送  3活动
					name:'',  //选择的服务项的名称
					price:'',
					expireTime:'',
					totalCount:'',
					customId:'',
					startTime:'',
					itemId:''  ,// 选择的服务项的id
					staffId:'' , // 选择的开卡人id
				},
				showAddServiceWindow:false,
				
				allServiceList:[] , // 全部服务项
				parentName:'' , // 大类的名称
				parentId:'' , // 大类的id
				childList:[] , // 选择的大类下的子服务项的列表
				childPrice:'' , // 已选择的子服务项的单价
				
				allEmployeeList:[] , // 全部员工列表
				staffName:'' , // 选择的开卡人姓名
				
				chargeList:[{'value' : 0 , 'label' : '收费'} , 
				{'value' : 1 , 'label' : '体验'} ,
				{'value' : 2 , 'label' : '赠送'} ,
				{'value' : 3 , 'label' : '活动'}],
				chargeTypeLabel:'' , //选择的收费类型名称
			}
		},
		
		components:{
			NoData
		},
		
		onLoad(options) {
			this.checkBoss = this.cookie.get("ap_user_data").checkBoss
			
			//不为0  店员
			if (this.checkBoss != 0){
				this.addParams.staffId = this.cookie.get('ap_user_data').id
				this.staffName = this.cookie.get('ap_user_data').userName
			}
			
			this.customId = options.customId
			this.loadCustomerDetail()
			this.loadServiceList()
			
			if (this.checkBoss == 0){
				this.loadAllEmployee()
			}
			this.loadAllServiceList()
			let that = this
			uni.$on('refreshServiceList' , ()=>{
				that.loadServiceList()
				that.loadCustomerDetail()
			})
		},
		
		onPullDownRefresh() {
			this.loadServiceList()
			this.loadCustomerDetail()
		},
		
		methods: {
			loadAllEmployee(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000,
						status:1
					},
					success(res){
						if (res.code == 200){
							that.allEmployeeList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			loadAllServiceList(){
				let that = this
				this.http({
					url:'/user/item/findServiceItemList',
					method:'POST',
					data:{
						'status':0
					},
					success(res){
						if (res.code == 200){
							that.allServiceList = res.data
							that.showAddServiceWindow = !that.allServiceList || that.allServiceList.length < 1
						}
					},
					failed(e){
					}
				})
				
			},
			
			loadCustomerDetail(){
				if (!this.customId) return
				let that = this
				this.http({
					url:'/user/custom/findDetail',
					method:'POST',
					data:{
						customId : that.customId
					},
					success(res){
						if (res.code == 200){
							that.customerData = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			loadServiceList(){
				let that = this
				this.http({
					url:'/user/item/findCustomServiceItemList',
					method:'POST',
					data:{
						customId : that.customId,
					},
					success(res){
						if (res.code == 200){
							that.dataList = res.data
							that.dataList.forEach((item)=>{
								item.leftCount = item.totalCount - item.writeOffCount
							})
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			changeDate(e){
				this.addParams.expireTime = e.detail.value
			},
			
			changeOpenTime(e){
				this.addParams.startTime = e.detail.value
			},
			
			//修改开卡人
			changeEmployee(e){
				this.addParams.staffId = this.allEmployeeList[e.detail.value].id
				this.staffName = this.allEmployeeList[e.detail.value].userName
			},
			
			//修改收费类型
			changeChargeType(e){
				this.addParams.type = this.chargeList[e.detail.value].value
				this.chargeTypeLabel = this.chargeList[e.detail.value].label
			},
			
			changeService(e){
				console.log('changeService-------' , e)
				this.parentId = this.allServiceList[e.detail.value].id
				this.parentName = this.allServiceList[e.detail.value].itemName
				this.childList = this.allServiceList[e.detail.value].childList
			},
			
			changeChildService(e){
				console.log('changeChildService----' , e)
				this.addParams.name = this.childList[e.detail.value].itemName
				this.addParams.itemId = this.childList[e.detail.value].id
				
				this.childPrice = this.childList[e.detail.value].price
				if (this.childPrice && this.addParams.totalCount){
					this.addParams.price = this.childPrice * this.addParams.totalCount
				} else{
					this.addParams.price = "0"
				}
			},
			
			changeTotalCount(e){
				this.addParams.totalCount = e.detail.value
				if (this.childPrice && this.addParams.totalCount){
					this.addParams.price = this.childPrice * this.addParams.totalCount
				} else{
					this.addParams.price = "0"
				}
			},
			
			handleAddService(){
				// this.showAddWindow = false
				this.addParams.customId = this.customId
				let that = this
				this.http({
					url:'/user/item/saveOrUpdateCustomServiceItem',
					method:'POST',
					header:{
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("ap_token")
					},
					data:this.addParams,
					success(res){
						if (res.code == 200){
							that.showAddWindow = false
							that.addParams.name = ""
							that.addParams.price = ""
							that.addParams.totalCount = ""
							that.addParams.expireTime = ""
							that.addParams.customId = ""
							that.addParams.startTime = ""
							that.addParams.type = ""
							that.chargeTypeLabel = ""
							that.loadServiceList()
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			gotoServiceDetail(item){
				uni.navigateTo({
					url:'/pages/client/serviceDetail?itemId=' + item.id + "&itemName=" + item.name
				})
			},
			
			//跳转设置服务项
			gotoAddService(){
				this.showAddServiceWindow = false
			},
			
			handleCloseAddWindow(){
				this.addParams.name = ""
				this.addParams.price = ""
				this.addParams.expireTime = ""
				this.addParams.totalCount = ""
				this.addParams.startTime = ""
				this.addParams.itemId = ""
				this.addParams.staffId = ""
				this.addParams.type = ""
				this.chargeTypeLabel = ""
				this.showAddWindow = false
			}
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		padding: 30rpx;
		background: white;
		
		.avatar{
			width: 126rpx;
			height: 126rpx;
			margin-right: 24rpx;
		}
		
		.add-btn-box{
			background: #F94C4B;
			width: 100%;
			height: 88rpx;
			margin-top: 30rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		
		.column-line{
			width: 1rpx;
			height: 16rpx;
			background: #999999;
			margin: 0rpx 16rpx;
		}
	}
	
	
	
	.service-list-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin: 30rpx 0rpx;
		
		.title-line{
			background: linear-gradient(79.95deg, #EA3D3D 7.53%, rgba(234, 61, 61, 0) 92.47%);
			width: 144rpx;
			height: 10rpx;
			position: absolute;
			bottom: 0rpx;
		}
		
		.service-count-box{
			width: calc(100% - 60rpx);
			padding: 0rpx 30rpx;
			margin-bottom: 20rpx;
		}
		
		.data-item{
			display: flex;
			flex-direction: column;
			width: calc(100% - 108rpx);
			margin: 0rpx 30rpx;
			padding: 24rpx;
			position: relative;
			background: white;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			
			.time-up{
				background: #F94C4B;
				border-radius: 4rpx;
				margin-right: 4rpx;
				padding: 2rpx 9rpx;
				color: white;
				font-size: 22rpx;
				font-weight: 600;
			}
			
			.finish{
				background: #F5F5F5;
				border-radius: 4rpx;
				margin-right: 4rpx;
				padding: 2rpx 9rpx;
				color: #666666;
				font-size: 22rpx;
			}
			
			.time-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: calc(100% - 28rpx);
				padding: 0rpx 14rpx;
				height: 54rpx;
				margin-top: 14rpx;
				background: #F5F5F5;
				border-radius: 8rpx;
			}
			
			.red-tag{
				background: #F94C4B1A;
				border-radius: 6rpx;
				color: #F94C4B;
				padding: 4rpx 14rpx;
				font-size: 24rpx;
				font-weight: 600;
				margin-left: 8rpx;
			}
			
			.orange-tag{
				background: #FF8E3C1A;
				border-radius: 6rpx;
				color: #FF8E3C;
				padding: 4rpx 14rpx;
				font-size: 24rpx;
				font-weight: 600;
				margin-left: 8rpx;
			}
			
			.green-tag{
				background: #28B98526;
				border-radius: 6rpx;
				color: #28B985;
				padding: 4rpx 14rpx;
				font-size: 24rpx;
				font-weight: 600;
				margin-left: 8rpx;
			}
			
		}
	}
	
	.add-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 60rpx);
		padding: 40rpx 30rpx;
		background: white;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		
		.width-half{
			width: calc(50% - 10rpx);
		}
		
		.input-box{
			width: calc(100% - 48rpx);
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-top: 14rpx;
			padding: 0rpx 24rpx;
			color: #333333;
			font-size: 28rpx;
		}
	}
	
	.add-cancel{
		width: 200rpx;
		height: 85rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		background: #F5F5F5;
		line-height: 85rpx;
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.add-confirm{
		height: 85rpx;
		flex-grow: 1;
		border-radius: 10rpx;
		background: rgba(249, 76, 75, 0.5);
		line-height: 85rpx;
		text-align: center;
		color: white;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.add-service-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 60rpx);
		padding: 40rpx 30rpx;
		background: white;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	
</style>
